<template>

    <div class="app-container">
  
      <h2 style="text-align: center;">发布新课程</h2>
  
      <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
        <el-step title="填写课程基本信息" />
        <el-step title="创建课程大纲" />
        <el-step title="最终发布" />
      </el-steps>
  
      <el-button type="text" @click="openChapterDialog()">添加章节</el-button>
  
      <!-- 章节 -->
      <ul class="chanpterList">
        <li v-for="chapter in chapterVideoList" :key="chapter.id">
          <p>
            {{ chapter.title }}
  
            <span class="acts">
              <el-button type="text" @click="openVideo(chapter.id)">添加小节</el-button>
              <el-button style="" type="text" @click="openEditChapter(chapter.id)">编辑</el-button>
              <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
            </span>
          </p>
  
          <!-- 视频 -->
          <ul class="chanpterList videoList">
            <li v-for="video in chapter.children" :key="video.id">
              <p>{{ video.title }}
                <span class="acts">
                  <el-button type="text" @click="openEditVideo(video.id)">编辑</el-button>
                  <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
                </span>
              </p>
            </li>
          </ul>
        </li>
      </ul>
      <div>
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
      </div>
  
      <!-- 添加和修改章节表单 -->
      <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
        <el-form :model="chapter" label-width="120px">
          <el-form-item label="章节标题">
            <el-input v-model="chapter.title" />
          </el-form-item>
          <el-form-item label="章节排序">
            <el-input-number v-model="chapter.sort" :min="0" controls-position="right" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
        </div>
      </el-dialog>
  
      <!-- 添加和修改课时表单 -->
      <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
        <el-form :model="video" label-width="120px">
          <el-form-item label="课时标题">
            <el-input v-model="video.title" />
          </el-form-item>
          <el-form-item label="课时排序">
            <el-input-number v-model="video.sort" :min="0" controls-position="right" />
          </el-form-item>
          <el-form-item label="是否免费">
            <el-radio-group v-model="video.isFree">
              <el-radio :label="true">免费</el-radio>
              <el-radio :label="false">默认</el-radio>
            </el-radio-group>
          </el-form-item>
  
          <el-form-item label="上传视频">
            <el-upload
              :on-success="handleVodUploadSuccess"
              :on-remove="handleVodRemove"
              :before-remove="beforeVodRemove"
              :on-exceed="handleUploadExceed"
              :file-list="fileList"
              :action="BASE_API + '/eduvod/video/uploadAliyunVideo'"
              :limit="1"
              class="upload-demo">
              <el-button size="small" type="primary">上传视频</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">最大支持1G，<br>
                  支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                  GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                  MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                  SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                <i class="el-icon-question" />
              </el-tooltip>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
          <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  <script>
  import chapter from '@/api/edu/chapter'
  import video from '@/api/edu/video'
  export default {
    data() {
      return {
        saveBtnDisabled: false,
        chapterVideoList: [],
        courseId: '', // 课程id
        chapter: {
          title: '',
          sort: 0
        },
        video: { // 封装小节数据
          title: '',
          sort: 0,
          isFree: 0,
          videoSourceId: '',
          videoOriginalName: '' // 视频名称
        },
        dialogChapterFormVisible: false,
        dialogVideoFormVisible: false, // 小节弹框
        fileList: [], // 上传文件的列表
        BASE_API: process.env.BASE_API // 接口API地址
      }
    },
    created() {
      // 根据课程id得到该课程下的所有章节、小节
      if (this.$route.params && this.$route.params.id) {
        // 获取路径中的id值
        this.courseId = this.$route.params.id
        // 调用方法来得到某课程下的所有章节、小节
        this.getChapterVideo()
      }
    },
    methods: {
      // 点击×后跳出弹框,点击弹框的"确定"后调用的方法
      handleVodRemove() {
        video.deleteAlyVod(this.video.videoSourceId)
          .then(response => {
            // 提示删除成功
            this.$message({
              type: 'success',
              message: '删除视频成功!'
            })
            // 把文件列表清空
            this.fileList = []
  
            // 把video对象中的视频id和视频名称值清空
            // 上传视频id赋值
            this.video.videoSourceId = ''
            // 上传视频名称赋值
            this.video.videoOriginalName = ''
          })
      },
      // 点击×调用的方法,我们让其跳出弹框
      beforeVodRemove(file) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },
      // 上传视频成功调用的方法
      handleVodUploadSuccess(response, file) {
        // 上传视频id赋值
        this.video.videoSourceId = response.data.videoId
        // 上传视频名称赋值
        this.video.videoOriginalName = file.name
      },
      // 上传之前调用的方法(多用于设置文件大小、类型)
      handleUploadExceed() {
        this.$message.warning('想要重新上传视频，请先删除已上传的视频')
      },
  
      // 修改小节信息时,我们需要先做数据回显
      openEditVideo(videoId) {
        // 先让弹框弹出来
        this.dialogVideoFormVisible = true
  
        // 调用api中的方法实现数据回显
        video.getVideo(videoId)
          .then(response => {
            this.video = response.data.video
          })
      },
      // 删除小节
      removeVideo(videoId) {
        this.$confirm('此操作将永久删除小节记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击确定会执行then方法
          // 调用video.js中定义的删除方法
          video.deleteVideo(videoId)
            .then(response => { // 删除成功
              // 1.提示删除成功
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 2.刷新页面
              this.getChapterVideo()
            })
            // eslint-disable-next-line handle-callback-err
            .catch(error => { }) // 删除失败
        })
      },
      // 弹出添加小节的页面
      openVideo(chapterId) {
        // 弹出界面
        this.dialogVideoFormVisible = true
        // 设置章节id
        this.video.chapterId = chapterId
        // 清空表单数据
        this.video.title = ''
        this.video.sort = 0
        this.video.isFree = 0
        this.video.videoSourceId = ''
        this.fileList = [] // 清空文件列表
      },
      // 添加小节
      addVideo() {
        // 设置课程id
        this.video.courseId = this.courseId
        video.addVideo(this.video)
          .then(response => {
            // 1.关闭弹框
            this.dialogVideoFormVisible = false
            // 2.提示添加成功
            this.$message({
              type: 'success',
              message: '添加小节成功'
            })
            // 3.刷新页面
            this.getChapterVideo()
          })
      },
      // 修改小节
      updateVideo() {
        video.updateVideo(this.video)
          .then(response => {
            // 1.关闭弹框
            this.dialogVideoFormVisible = false
            // 2.提示修改成功
            this.$message({
              type: 'success',
              message: '修改小节成功'
            })
            // 3.刷新页面
            this.getChapterVideo()
            // 4.让video.id布尔判断为false,也就是清空video.id
            this.video.id = null
          })
      },
      saveOrUpdateVideo() {
        if (!this.video.id) {
          this.addVideo()
        } else {
          this.updateVideo()
        }
      },
      // 删除章节
      removeChapter(chapterId) {
        this.$confirm('此操作将永久删除章节记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击确定会执行then方法
          // 调用chapter.js中定义的删除方法
          chapter.deleteChapter(chapterId)
            .then(response => { // 删除成功
              // 1.提示删除成功
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 2.刷新页面
              this.getChapterVideo()
            })
            // eslint-disable-next-line handle-callback-err
            .catch(error => { }) // 删除失败
        })
      },
      // 修改章节信息时,我们需要先做数据回显
      openEditChapter(chapterId) {
        // 先让弹框弹出来
        this.dialogChapterFormVisible = true
  
        // 调用api中的方法实现数据回显
        chapter.getChapter(chapterId)
          .then(response => {
            this.chapter = response.data.chapter
          })
      },
      // 弹出添加章节的页面
      openChapterDialog() {
        // 弹出界面
        this.dialogChapterFormVisible = true
        // 清空表单数据
        this.chapter.title = ''
        this.chapter.sort = 0
      },
      // 添加章节
      addChapter() {
        // 设置课程id到chapter对象里面
        this.chapter.courseId = this.courseId
  
        chapter.addChapter(this.chapter)
          .then(response => {
            // 1.关闭弹框
            this.dialogChapterFormVisible = false
            // 2.提示添加成功
            this.$message({
              type: 'success',
              message: '添加章节成功'
            })
            // 3.刷新页面
            this.getChapterVideo()
          })
      },
      // 修改章节
      updateChapter() {
        chapter.updateChapter(this.chapter)
          .then(response => {
            // 1.关闭弹框
            this.dialogChapterFormVisible = false
            // 2.提示修改成功
            this.$message({
              type: 'success',
              message: '修改章节成功'
            })
            // 3.刷新页面
            this.getChapterVideo()
            // 4.让chapter.id布尔判断为false,也就是清空chapter.id
            this.chapter.id = null
          })
      },
      saveOrUpdate() {
        if (!this.chapter.id) {
          this.addChapter()
        } else {
          this.updateChapter()
        }
      },
      // 根据课程id得到该课程下的所有章节、小节
      getChapterVideo() {
        chapter.getAllChapterVideo(this.courseId)
          .then(response => {
            this.chapterVideoList = response.data.allChapterVideo
          })
      },
      // 跳转到第一步
      previous() {
        this.$router.push({ path: '/course/info/' + this.courseId })
      },
      // 跳转到第三步
      next() {
        this.$router.push({ path: '/course/publish/' + this.courseId })
      }
    }
  }
  </script>
  
  <style scoped>
  .chanpterList {
      position: relative;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .chanpterList li {
      position: relative;
  }
  
  .chanpterList p {
      float: left;
      font-size: 20px;
      margin: 10px 0;
      padding: 10px;
      height: 70px;
      line-height: 50px;
      width: 100%;
      border: 1px solid #DDD;
  }
  
  .chanpterList .acts {
      float: right;
      font-size: 14px;
  }
  
  .videoList {
      padding-left: 50px;
  }
  
  .videoList p {
      float: left;
      font-size: 14px;
      margin: 10px 0;
      padding: 10px;
      height: 50px;
      line-height: 30px;
      width: 100%;
      border: 1px dotted #DDD;
  }
  </style>
  